<template>
    <view class="container">
        <view class="content">
            <!-- 1.0 用户信息区域 -->
            <view class="user-section">
                <view class="user-info">
                    <!-- 登录前显示微信头像，登录后显示用户头像，均不可更换 -->
                    <view class="avatar-wrapper">
                        <image class="avatar" :src="avatarurl" mode="aspectFill" @error="handleImageError" />
                    </view>
                    <view class="user-detail">
                        <!-- 登录前后都只显示昵称文本 -->
                        <text class="nickname">{{ nickname }}</text>
                        <text class="user-desc">{{ isLogin ? '已开启您的露营之旅' : '开启您的露营之旅' }}</text>

                        <!-- 登录按钮仅在未登录时显示 -->
                        <button v-if="!isLogin" class="login-btn" @tap="handleLogin">微信一键登录</button>
                    </view>
                </view>
            </view>

            <!-- 2.0 我的收藏 -->
            <view class="menu-section">
                <!-- 添加修改资料菜单项 -->
                <view v-if="isLogin" class="menu-item" @tap="onEditProfile">
                    <text class="menu-icon">✏️</text>
                    <text class="menu-text">修改资料</text>
                    <text class="menu-arrow">></text>
                </view>
                <view class="menu-item" @tap="onCollectionTap">
                    <text class="menu-icon">❤️</text>
                    <text class="menu-text">我的收藏</text>
                    <text class="menu-arrow">></text>
                </view>
            </view>

            <!-- 3.0 退出登录 -->
            <view class="logout-section">
                <button class="logout-btn" @tap="logout">退出登录</button>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { userApi } from '@/api/index'

// 响应式数据
const isLogin = ref(false)
const avatarurl = ref('')
const nickname = ref('微信用户')

// 登录处理方法
const handleLogin = function () {
    wx.getUserProfile({
        desc: '用于完善会员资料',
        success: function (userInfoRes) {
            // 1. 弹窗提示用户用途
            uni.showModal({
                title: '提示',
                content: '我们将获取您的微信昵称和头像用于登录和完善会员资料',
                confirmText: '确认登录',
                cancelText: '取消',
                success: function (modalRes) {
                    if (modalRes.confirm) {
                        // 2. 获取登录凭证 code
                        wx.login({
                            success: function (loginRes) {
                                if (loginRes.code) {
                                    const loginData = {
                                        nickname: userInfoRes.userInfo.nickName,
                                        avatarurl: userInfoRes.userInfo.avatarurl
                                    }
                                    // 3. 调用登录接口
                                    loginWithWechat(loginData, loginRes.code)
                                }
                            },
                            fail: handleLoginFail
                        })
                    }
                }
            })
        },
        fail: handleLoginFail
    })
}

// 微信登录方法
const loginWithWechat = async (loginData, code) => {
    try {
        const res = await userApi.login({
            code,
            ...loginData
        })

        if (res.data) {
            // 处理登录成功
            const userInfo = res.data
            // 保存用户信息到本地
            uni.setStorageSync('userInfo', userInfo)
            // 更新页面显示
            updateUserInfo(userInfo)
            // 显示成功提示
            uni.showToast({
                title: '登录成功',
                icon: 'success'
            })
        } else {
            throw new Error('登录失败')
        }
    } catch (error) {
        console.error('登录失败:', error)
        handleLoginFail()
    }
}

// 登录失败处理
const handleLoginFail = () => {
    uni.showToast({
        title: '登录失败',
        icon: 'none'
    })
}

// 图片加载失败处理
const handleImageError = () => {
    avatarurl.value = '/static/avatar/default-avatar.png'
}

// 更新用户信息显示
const updateUserInfo = (userInfo) => {
    if (userInfo) {
        isLogin.value = true
        avatarurl.value = userInfo.avatarurl || '/static/avatar/default-avatar.png'
        nickname.value = userInfo.nickname || '微信用户'
    } else {
        isLogin.value = false
        avatarurl.value = '/static/avatar/default-avatar.png'
        nickname.value = '微信用户'
    }
}

// 修改资料
const onEditProfile = () => {
    if (!isLogin.value) {
        uni.showToast({
            title: '请先登录',
            icon: 'none'
        })
        return
    }
    uni.navigateTo({
        url: '/pages/profile-edit/index'
    })
}

// 跳转到收藏页面
const onCollectionTap = () => {
    uni.navigateTo({
        url: '/pages/collection/index'
    })
}

// 退出登录
const logout = () => {
    uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: function (res) {
            if (res.confirm) {
                // 清除本地存储的用户信息
                uni.removeStorageSync('userInfo')
                // 更新页面显示
                updateUserInfo(null)
                uni.showToast({
                    title: '已退出登录',
                    icon: 'success'
                })
            }
        }
    })
}

// 页面加载时检查登录状态
onMounted(() => {
    const userInfo = uni.getStorageSync('userInfo')
    updateUserInfo(userInfo)
})

// 页面每次显示时刷新用户信息
onShow(() => {
    const userInfo = uni.getStorageSync('userInfo')
    updateUserInfo(userInfo)
})
</script>

<style>
.container {
    background: #f7f8fa;
    min-height: 100vh;
    padding: 20rpx;
}

/* 用户信息区域 */
.user-section {
    background: linear-gradient(45deg, #07c160, #1aad19);
    border-radius: 20rpx;
    padding: 40rpx 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.user-info {
    display: flex;
    align-items: center;
}

/* 修改头像样式，移除点击效果 */
.avatar-wrapper {
    width: 140rpx;
    height: 140rpx;
    border-radius: 70rpx;
    margin-right: 30rpx;
    background: none;
    border: 4rpx solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* 只有未登录状态的头像wrapper才有按钮样式 */
button.avatar-wrapper {
    padding: 0;
}

button.avatar-wrapper::after {
    border: none;
}

.avatar {
    width: 140rpx;
    height: 140rpx;
    border-radius: 70rpx;
}

.user-detail {
    flex: 1;
}

.nickname {
    font-size: 40rpx;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 10rpx;
    display: block;
}

.nickname-input {
    font-size: 36rpx;
    padding: 10rpx 0;
    margin-bottom: 10rpx;
    border-bottom: 2rpx solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.nickname-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.user-desc {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.9);
}

.login-btn {
    margin-top: 20rpx;
    padding: 12rpx 40rpx;
    background: #ffffff;
    color: #07c160;
    border-radius: 40rpx;
    font-size: 28rpx;
    font-weight: bold;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

/* 菜单区域 */
.menu-section {
    background: #ffffff;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 32rpx;
    border-bottom: 1rpx solid #f5f5f5;
    transition: all 0.3s;
}

.menu-item:active {
    background: #f9f9f9;
}

.menu-icon {
    font-size: 40rpx;
    margin-right: 24rpx;
}

.menu-text {
    flex: 1;
    font-size: 30rpx;
    color: #333333;
    font-weight: 500;
}

.menu-arrow {
    font-size: 28rpx;
    color: #999999;
}

/* 退出登录按钮 */
.logout-section {
    padding: 20rpx 30rpx;
}

.logout-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    background: #ffffff;
    color: #f56c6c;
    border-radius: 44rpx;
    font-size: 30rpx;
    font-weight: bold;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    border: 2rpx solid #f56c6c;
    transition: all 0.3s;
}

.logout-btn:active {
    transform: scale(0.98);
    background: #f56c6c;
    color: #ffffff;
}

.logout-btn::after {
    border: none;
}
</style>